<template>
  <el-drawer
    title="资源库"
    :visible.sync="isshow"
    direction="rtl"
    :withHeader="false"
    size="550px"
    @close="closeDrawer"
  >
    <div class="content">

      <div class="title">
        <i class="el-icon-arrow-left" @click="backTo" v-if="pathArr.length > 1"></i>
        <div>资源库</div>
      </div>
      <div class="sea_bar">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          clearable
          @input="searchFiles"
          v-model="searchText"
        >
        </el-input>
      </div>
      <div class="library_list" v-loading="loading">
        <library-list v-model="checkAll" ref="libraryList" @checklist="getCheckList" :dataList="fileList"
                      @fileClick="nextInto" @lookMore="loadMoreData"
        />
      </div>
      <div class="footer">
        <div class="foot_l">
          <el-checkbox v-model="checkAll">全选</el-checkbox>
          <div>已选中<span>{{ selectedList.length }}</span>个文件</div>
        </div>
        <div class="upBtn" @click="uploadCourseFile()">上传</div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import LibraryList from '@/views/tea_course/components/libraryList.vue'
import { fileSearch, getfileList, copyToCourse } from '@/api/library_index'
import { mapGetters, mapMutations } from 'vuex'
import FileList from '@/views/library_homePage/component/FileList.vue'

export default {
  name: 'uploadfromlibrary',
  components: { FileList, LibraryList },
  mounted() {
    this.clearPathArr()

  },
  data() {
    // TODO：下拉刷新
    return {
      isshow: false,
      searchText: '',
      checkAll: false,
      selectedList: [],
      fileList: [],
      courseId: '',
      loading: true,
      total: 0,
      pageNum: 1,
      pageSize: 60
    }
  },
  computed: {
    ...mapGetters('libraryFile', ['pathArr', 'courseArr'])
  },
  methods: {
    ...mapMutations('libraryFile', ['removePath', 'clearPathArr', 'removecoursePath', 'clearcoursePathArr']),
    show(id) {
      this.courseId = id
      this.isshow = true
      this.pageNum = 1
      this.getFilesList(0)
    },
    loadMoreData() {
      if (this.total > this.fileList.length) {
        this.pageNum++
        this.getFilesList(this.pathArr[this.pathArr.length - 1].id)
      } else {
        console.log('没有更多数据了')
      }
    },
    // 查询文件列表
    async getFilesList(parentId) {
      this.loading = true
      let res = await getfileList({ fileType: 0, parentId: parentId, pageNum: this.pageNum, pageSize: this.pageSize })
      if (res.code === 200) {
        this.total = res.total
        if (this.pageNum == 1) {
          this.fileList = res.rows.map(item => {
            return {
              ...item,
              checked: false,
              reSetName: item.reSetName ? item.reSetName : false
            }
          })
        } else {
          let arr = res.rows.map(item => {
            return {
              ...item,
              checked: false,
              reSetName: item.reSetName ? item.reSetName : false
            }
          })
          this.fileList.push(...arr)
        }
      }
      this.loading = false
    },
    getCheckList(data) {
      this.selectedList = data.arr
    },
    nextInto(data) {
      this.pageNum = 1
      this.getFilesList(data)
    },
    async searchFiles() {
      if (this.searchText !== '') {
        let res = await fileSearch({ fileName: this.searchText })
        if (res.code == 200) {
          this.fileList = res.rows
        }
      } else {
        this.pageNum = 1
        this.getFilesList(0)
      }
    },
    async uploadCourseFile() {
      if (this.selectedList.length === 0) {
        this.$message.info('请选择文件')
        return
      }
      let obj = {
        courseId: this.courseId,
        fileUserIds: this.selectedList.map(item => item.id).join(',')
      }
      let res = await copyToCourse(obj)
      if (res.code == 200) {
        this.selectedList.forEach((e) => {
          e.fileUrl = res.data.find(item => item.fileUserId == e.id).url
          e.fileName = e.fileName + '.' + e.extendName
          e.type = 1
        })
        this.$emit('uploadlibraryFile', { arr: this.selectedList })
        this.$message.success('上传成功')
        this.isshow = false
      }
    },
    closeDrawer() {
      this.searchText = ''
      this.checkAll = false
      this.selectedList = []
      this.fileList = []
      this.courseId = ''
    },
    backTo() {
      this.removePath(this.pathArr.length - 2)
      setTimeout(() => {
        this.pageNum = 1
        this.getFilesList(this.pathArr[this.pathArr.length - 1].id)
      }, 100)

    }
  }
}

</script>


<style scoped lang="scss">
::v-deep .el-input {
  border-radius: 50% !important;
}

::v-deep .el-input__icon {
  font-style: normal;
}

.content {
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;

  .title {
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 500;

    i {
      font-style: normal;
    }


    div {
      width: 100%;
      text-align: center;
    }
  }

  .sea_bar {
    margin-top: 20px;
  }

  .library_list {
    flex: 1;
    overflow: hidden;
    padding-bottom: 50px;
    box-sizing: border-box;
  }

  .footer {
    width: 100%;
    position: absolute;
    bottom: 1px;
    left: 0;
    display: flex;
    align-items: center;
    height: 50px;
    border-top: 1px solid #dddddd;

    .foot_l {
      width: 70%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding: 0 10px;
      box-sizing: border-box;

      span {
        color: #1ab394;
      }
    }

    .upBtn {
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      width: 30%;
      background-color: #56b089;
    }
  }
}
</style>
